<template>
  <div class="y-table-operation">
    <y-button-group>
      <y-button
        v-for="(item, index) in btnsComputed"
        :key="index"
        class="y-table-operation-item"
        v-bind="item"
        @click.native=" bus ? eventBus(item) : event(item)"
        tips
      />
      <el-dropdown v-if="more">
        <el-button
          size="small"
          type="primary"
          icon="el-icon-arrow-down el-icon--right"
        ></el-button>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item 
            v-for="(item, index) in more" :key="index"
            @click.native=" bus ? eventBus(item) : event(item)"
            >{{item.label}}</el-dropdown-item
          >
        </el-dropdown-menu>
      </el-dropdown>
    </y-button-group>
  </div>
</template>

<script>
export default {
  name: "y-table-operation",
  props: {
    btns: Array,
    more: Array,
    bus : Boolean
  },
  data() {
    return {
      defBtns: {
        add: { label: "新增", icon: "add", trigger: "add" },
        edit: { label: "编辑", icon: "edit", trigger: "edit", type: "warning" },
        delete: {
          label: "删除",
          icon: "delete",
          trigger: "delete",
          type: "danger",
        },
        audit: { label: "审核", icon: "audit", trigger: "audit" },
        print: { label: "打印", icon: "print", trigger: "print" },
      },
    };
  },
  computed: {
    btnsComputed() {
      if(!this.btns) return []
      var btns = [];
      var _this = this;
      _this.btns.forEach((btn) => {
        if (typeof btn == "string") {
          btn = _this.defBtns[btn];
        }
        if (typeof btn == "object") {
          btns.push(btn);
        }
      });
      return btns;
    },
  },
  created() {},
  methods: {
    eventBus(item){
      var that = this;
      if (["add", "edit"].includes(item.trigger)) {
        that.$emit('event',item, (res) => {
          that.$router.push(
            that.$router.currentRoute.path + "/form?" + $y.toQueryParams(res)
          );
        });
      } else {
        this.$emit('event', item);
      }
    },
    event(item){
      var that = this;
      if (["add", "edit"].includes(item.trigger)) {
        that.$emit(item.trigger,item, (res) => {
          that.$router.push(
            that.$router.currentRoute.path + "/form?" + $y.toQueryParams(res)
          );
        });
      } else {
        this.$emit(item.trigger,item);
      }
    }
  },
};
</script>


<style lang="scss" scoped>
.y-table-operation {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
}
</style>